<template>
  <el-text>高尚是高尚者的墓志铭，卑鄙是卑鄙者的通行证</el-text>
  <el-container id="commonLayout">
    <el-aside id="navigationLayout">
      <el-link :href="`/tally?month=${month}`">账单</el-link>
      <el-link href="/trip">旅途</el-link>
      <el-link href="/record">记账</el-link>
    </el-aside>
    <el-main id="valueLayout">
      <el-table :data="tally.bills" table-layout="auto">
        <el-table-column prop="time" label="使用时间" align="right"/>
        <el-table-column prop="purpose" label="用处" align="right"/>
        <el-table-column prop="category" label="类别" align="right"/>
        <el-table-column prop="amount" label="金额" align="right">
          <template v-slot="scope">{{ scope.row.amount.toFixed(2) }}</template>
        </el-table-column>
      </el-table>
      <el-pagination id="paginationLayout"
                     background layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :total="tally.total"/>
    </el-main>
  </el-container>
</template>


<script setup>
import {inject, onMounted, ref} from "vue"
import axios from 'axios';

const GLOBAL_CONSTANT = inject('GLOBAL_CONSTANT');
const tally = ref([])
onMounted(() => {
  handleCurrentChange(1);
})

const handleCurrentChange = (val) => {
  axios.get(GLOBAL_CONSTANT + 'bill/info/', {
    params: {currentPage: val}
  })
      .then((res) => {
        if (res.data.code === 1001) {
          tally.value = res.data.data;
        }
      })
}
</script>

<style scoped>
#paginationLayout {
  display: flex;
  justify-content: flex-end;
  margin: auto;
}

#commonLayout {
  width: 1000px;
  margin: auto;

}

#navigationLayout {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin-top: 80px;
  gap: 30px;
}

#valueLayout {
  width: 800px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
</style>



